import $ from '../library/jquery.js';
$(function(){
    // $('#app').on('mouseover',function(){
    //     $('.header-nav-div').slideDown(200);
    // })
    // $('#app').on('mouseleave',function(){
    //     $('.header-nav-div').slideUp(200);
    // })
    $('.header-shop').on('mouseover',function(){
        $('#shop').slideDown(200);
        $('.header-shop>span').css('color','orangered')
        $('.header-shop>span>a').css('color','orangered')
    })
    $('.header-shop').on('mouseleave',function(){
        $('#shop').slideUp(200);
        $('.header-shop>span').css('color','#B0B0B0')
        $('.header-shop>span>a').css('color','#B0B0B0')
    })
    $('.site-header-nav>ul>li:eq(0)').on('mouseenter',function(){
        $('.site-header-nav>ul>li:eq(0)>#site-header-bottom').css('display','block');
    })
    $('.site-header-nav>ul>li:eq(0)').on('mouseleave',function(){
        $('.site-header-nav>ul>li:eq(0)>#site-header-bottom').css('display','none');
    })
    $('.site-header-nav>ul>li:eq(1)').on('mouseenter',function(){
        $('.site-header-nav>ul>li:eq(1)>#site-header-bottom').css('display','block');
    })
    $('.site-header-nav>ul>li:eq(1)').on('mouseleave',function(){
        $('.site-header-nav>ul>li:eq(1)>#site-header-bottom').css('display','none');
    })
    $('.site-header-nav>ul>li:eq(2)').on('mouseenter',function(){
        $('.site-header-nav>ul>li:eq(2)>#site-header-bottom').css('display','block');
    })
    $('.site-header-nav>ul>li:eq(2)').on('mouseleave',function(){
        $('.site-header-nav>ul>li:eq(2)>#site-header-bottom').css('display','none');
    })
    $('.site-header-nav>ul>li:eq(3)').on('mouseenter',function(){
        $('.site-header-nav>ul>li:eq(3)>#site-header-bottom').css('display','block');
    })
    $('.site-header-nav>ul>li:eq(3)').on('mouseleave',function(){
        $('.site-header-nav>ul>li:eq(3)>#site-header-bottom').css('display','none');
    })
    $('.site-header-nav>ul>li:eq(4)').on('mouseenter',function(){
        $('.site-header-nav>ul>li:eq(4)>#site-header-bottom').css('display','block');
    })
    $('.site-header-nav>ul>li:eq(4)').on('mouseleave',function(){
        $('.site-header-nav>ul>li:eq(4)>#site-header-bottom').css('display','none');
    })
    $('.site-header-nav>ul>li:eq(5)').on('mouseenter',function(){
        $('.site-header-nav>ul>li:eq(5)>#site-header-bottom').css('display','block');
    })
    $('.site-header-nav>ul>li:eq(5)').on('mouseleave',function(){
        $('.site-header-nav>ul>li:eq(5)>#site-header-bottom').css('display','none');
    })
    $('.site-header-nav>ul>li:eq(6)').on('mouseenter',function(){
        $('.site-header-nav>ul>li:eq(6)>#site-header-bottom').css('display','block');
    })
    $('.site-header-nav>ul>li:eq(6)').on('mouseleave',function(){
        $('.site-header-nav>ul>li:eq(6)>#site-header-bottom').css('display','none');
    })



        $(`.hero-left>ul>li>a:eq(0)`).on('mouseover',function(){
            $(`#center-left-0`).show();
        }) 
        $(`.hero-left>ul>li>a:eq(0)`).on('mouseleave',function(){
            $(`#center-left-0`).hide();
        })

        $(`.hero-left>ul>li>a:eq(1)`).on('mouseover',function(){
            $(`#center-left-1`).show();
        }) 
        $(`.hero-left>ul>li>a:eq(1)`).on('mouseleave',function(){
            $(`#center-left-1`).hide();
        })

        $(`.hero-left>ul>li>a:eq(2)`).on('mouseover',function(){
            $(`#center-left-2`).show();
        }) 
        $(`.hero-left>ul>li>a:eq(2)`).on('mouseleave',function(){
            $(`#center-left-2`).hide();
        })
        $(`.hero-left>ul>li>a:eq(3)`).on('mouseover',function(){
            $(`#center-left-3`).show();
        }) 
        $(`.hero-left>ul>li>a:eq(3)`).on('mouseleave',function(){
            $(`#center-left-3`).hide();
        })
        $(`.hero-left>ul>li>a:eq(4)`).on('mouseover',function(){
            $(`#center-left-4`).show();
        }) 
        $(`.hero-left>ul>li>a:eq(4)`).on('mouseleave',function(){
            $(`#center-left-4`).hide();
        })
        $(`.hero-left>ul>li>a:eq(5)`).on('mouseover',function(){
            $(`#center-left-5`).show();
        }) 
        $(`.hero-left>ul>li>a:eq(5)`).on('mouseleave',function(){
            $(`#center-left-5`).hide();
        })
        $(`.hero-left>ul>li>a:eq(6)`).on('mouseover',function(){
            $(`#center-left-6`).show();
        }) 
        $(`.hero-left>ul>li>a:eq(6)`).on('mouseleave',function(){
            $(`#center-left-6`).hide();
        })
        $(`.hero-left>ul>li>a:eq(7)`).on('mouseover',function(){
            $(`#center-left-7`).show();
        }) 
        $(`.hero-left>ul>li>a:eq(7)`).on('mouseleave',function(){
            $(`#center-left-7`).hide();
        })
        $(`.hero-left>ul>li>a:eq(8)`).on('mouseover',function(){
            $(`#center-left-8`).show();
        }) 
        $(`.hero-left>ul>li>a:eq(8)`).on('mouseleave',function(){
            $(`#center-left-8`).hide();
        })
        $(`.hero-left>ul>li>a:eq(9)`).on('mouseover',function(){
            $(`#center-left-9`).show();
        }) 
        $(`.hero-left>ul>li>a:eq(9)`).on('mouseleave',function(){
            $(`#center-left-9`).hide();
        }) 


        $('.center-hot>li:eq(0)').on('mouseover',function(){
            // $('#center-watch>ul').addClass('conter-conter-div');
            $('#center-watch>ul').show();
        }) 
        $('.center-hot>li:eq(1)').on('mouseover',function(){
            // $('#center-watch>ul').removeClass('conter-conter-div');
            $('#center-watch>ul').hide();
        })

        $('body').on('mousewheel',function(){
              if( $(document).scrollTop()>900){
               $('.last-app').css('display','block')
              }
            else{
             $('.last-app').css('display','none')
            }
        })

        setInterval(function(){
            $('.fooder3-img>img').css('display','block')
            $('.fooder3>img:eq(4)').css('display','none')
        },3000)
        setInterval(function(){
            $('.fooder3-img>img').css('display','none')
            $('.fooder3>img:eq(4)').css('display','block')
        },6000)

        
            
        




        $.ajax({
            type: "get",
            url: "../interface/getitems.php",
            dataType: "json"
        }).then(res => {
            let template = '';
            res.forEach(el => {
                let pic = JSON.parse(el.picture);
                template += `<li><a href="./product.html?id=${el.id}"><img src="./${pic[0].src}" alt="">
                <h3>${el.title}</h3>
                <p>${el.details}
                </p>
                <em>${el.price}元起
                    <span><del>2099元</del></span>
                </em>
                </a></li>`;
            });
            $('.conter-conter-div1').html(template);
        }).catch(err => {
            console.log(err);
        });
        
    
})